<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Fine tuning the color</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch07.html" title="Chapter 7. Color handling"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Fine tuning the color</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 7. Color handling</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Fine tuning the color"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2496338"></a>Fine tuning the color</h2></div></div></div>
            
            <div class="sect2" title="Specifying the alpha channel (color transparency)"><div class="titlepage"><div><div><h3 class="title"><a name="sec2.alpha-channel"></a>Specifying the alpha channel (color transparency)</h3></div></div></div>
                
                <p>Colors can also be made semi-transparent by specifying a transparency value
                    (or as it is also known an <span class="italic">alpha channel value</span>). This will instruct the
                    library to mix the foreground color with a certain amount of the background
                    colors creating a "shine-through" effect.</p>
                <p>The alpha channel is specified as a real number in the range [0.0, 1.0] where
                    0.0 means no transparency and 1.0 means full transparency (i.e. only the
                    background color is shown). The transparency is added as a postfix to the color
                    specification separated by a '@' (at) character. It is often most used with area
                    fills (i.e. when using <code class="code">SetFillColor()</code>)</p>
                <p>For example the following are valid alpha channel modifiers</p>
                <p>
                    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
                            <p><code class="code">SetFillColor('red@0.2')</code>, A slightly transparent red
                                color</p>
                        </li><li class="listitem">
                            <p><code class="code">SetFillColor('red@0.8')</code>, An almost completely
                                transparent color</p>
                        </li></ul></div><p>
                </p>
                <p>The result of using different alpha modifiers are shown in <a class="xref" href="ch07s04.html#fig.alpha-channel" title="Figure 7.1. Using alpha channel modifiers">Figure 7.1. Using alpha channel modifiers</a> where the blue color is made more and more
                    transparent to allow the red bar in the background to become more and more
                    visible.</p>
                <p>
                    </p><div class="figure"><a name="fig.alpha-channel"></a><p class="title"><b>Figure 7.1. Using alpha channel modifiers</b></p><div class="figure-contents">
                        
                        <div class="mediaobject"><img src="images/alpha-channel.png" alt="Using alpha channel modifiers"></div>
                    </div></div><p><br class="figure-break">
                </p>
                <p>As a final example of how to use transparency we show a graph in <a class="xref" href="ch07s04.html#fig.barlinealphaex1" title="Figure 7.2. Making use of transparency to combine two plots (barlinealphaex1.php)">Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </a> that uses transparency to allow an area
                    plot to be mixed with a bar graph.</p>
                <p>
                    </p><div class="figure"><a name="fig.barlinealphaex1"></a><p class="title"><b>Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </b></p><div class="figure-contents">  <span class="inlinemediaobject"><img src="images/barlinealphaex1.png" alt="Making use of transparency to combine two plots (barlinealphaex1.php)"></span> </div></div><p><br class="figure-break">
                </p>
                <div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
                    <p>For all graph examples shown in this manual you can always click on the
                        file name in the title of the graph to view the actual source that created
                        the graph.</p>
                </div>
            </div>
            <div class="sect2" title="Adjusting the brightness"><div class="titlepage"><div><div><h3 class="title"><a name="id2496356"></a>Adjusting the brightness</h3></div></div></div>
                
                <p>Since all colors that can be displayed on a computer can be modeled with the
                    appropriate RGB triple the above ways will allow you to specify any colors you
                    might need. However, conceptually it might be easier to think of colors in terms
                    of "a light blue" instead of a modified RGB triple so the library allows you to
                    take a basic color and apply a brightness correction factor.</p>
                <p>The brightness factor is a postfix to the color string separated from the core
                    color with a ':' (colon) character. The brightness factor is a real number in
                    the range of [0.0, 2.0]. Using a brightness factor of 0.0 means that the color
                    will be black (no brightness at all) and a factor of 2.0 means that the color is
                    white (maximum brightness). Using a factor of 1 will leave the original color
                    untouched.</p>
                <p>The brightness factor can be specified for named and HTML colors, see <a class="xref" href="ch07s04.html#fig.orange-scale" title="Figure 7.3. Adjusting brightness of named color specifier">Figure 7.3. Adjusting brightness of named color specifier</a> and <a class="xref" href="ch07s04.html#fig.blueish-scale" title="Figure 7.4. Adjusting brightness of a HTML color specifier">Figure 7.4. Adjusting brightness of a HTML color specifier</a> for more examples how the factor adjusts
                    the color.</p>
                <p>For example, the following code snippets show valid color brightness
                    modifiers</p>
                <p>
                    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
                            <p><code class="code">SetColor('red:0.8');</code>, A slightly darker red
                                color</p>
                        </li><li class="listitem">
                            <p><code class="code">SetColor('red:1.5');</code>, A brighter red color</p>
                        </li><li class="listitem">
                            <p><code class="code">SetColor('#3485a9:1.8);</code>, A bright blue-greenish
                                color</p>
                        </li></ul></div><p>
                </p>
                <div class="figure"><a name="fig.orange-scale"></a><p class="title"><b>Figure 7.3. Adjusting brightness of named color specifier</b></p><div class="figure-contents">
                    
                    <div class="mediaobject"><img src="images/orange-scale.png" alt="Adjusting brightness of named color specifier"></div>
                </div></div><br class="figure-break">
                <div class="figure"><a name="fig.blueish-scale"></a><p class="title"><b>Figure 7.4. Adjusting brightness of a HTML color specifier</b></p><div class="figure-contents">
                    
                    <div class="mediaobject"><img src="images/blueish-scale.png" alt="Adjusting brightness of a HTML color specifier"></div>
                </div></div><br class="figure-break">
                <div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
                    <p>The brightness factor is a purely linear factor but due to the human eyes
                        non-linear sensitivity for colors the perceived difference between (for
                        example) "<code class="code">red:1.1</code>" and "<code class="code">red:1.2</code>" than between
                            "<code class="code">red:0.2</code>" and "<code class="code">red:0.3</code>" even though the
                        relative difference is the same.</p>
                </div>
            </div>
            <div class="sect2" title="Combining brightness and transparency adjustment"><div class="titlepage"><div><div><h3 class="title"><a name="id2496665"></a>Combining brightness and transparency adjustment</h3></div></div></div>
                
                <p>It is also possible to combine the two previous discussed modifiers. This is
                    done by first adding the transparency specifier and then the brightness
                    adjustment as the following examples demonstrates.</p>
                <p>
                    </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
                            <p><code class="code">SetColor('red@0.7:1.2')</code>, A highly transparent
                                slightly bright red color</p>
                        </li><li class="listitem">
                            <p><code class="code">SetFillColor('#4545aa@0.3:1.5')</code>, A bright blueish
                                semi transparent color</p>
                        </li></ul></div><p>
                </p>
            </div>
        </div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch07.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
